<!--
 一级页面tabbar
 @Author: mosowe
 @Date:2022-12-30 09:34:01
-->

<template>
	<view :class="{
      'zo-tabbar': true,
      'hide-icon': props.hideIcon,
      'has-mid': hasMid
    }" :style="{
      '--zo-nav-default-color': props.color || '#333333',
      '--zo-nav-active-color': props.selectColor || '#333333',
      '--zo-nav-default-icon-color': props.iconColor || '#333333',
      '--zo-nav-active-icon-color': props.iconSelectColor || '#333333',
      '--zo-nav-mid-icon-color': props.fontMidIconColor || '#333333'
    }">
		<view class="content">
			<template v-for="(item, index) in props.list" :key="item.path">
				<template v-if="!item.hide">
					<view :class="{
              item: true,
              active: active === index,
              disabled: item.disabled
            }" v-if="!item.isCenter" @click="itemClick(item,index)">
						<view class="icon-wrap" v-if="item.icon">
							<!-- 	<template v-if="item.icon.indexOf('/') > -1">
								<image :src="item.icon" mode="" class="icon default"></image>
								<image :src="item.selectIcon" mode="" class="icon current"></image>
							</template>
							<template v-else>
								<text :class="['icon', 'default', item.icon || '']"></text>
								<text :class="['icon', 'current', item.selectIcon || '']"></text>
							</template> -->
							<uni-icons class="uniiconcss"
								:type="(item.icon && item.selectIcon) ? (active === index?item.selectIcon : item.icon):item.icon"
								:color='active === index?props.selectColor: (props?.iconColor || "#333333")'
								:size="item?.iconSize || 20"></uni-icons>

						</view>
						<text class="text">
							{{ item.text }}
						</text>
					</view>
					<view class="center" :class="{
              'center-icon-text': item.text,
              active: active === index
            }" v-if="item.isCenter && [3, 5].includes(props.list.length)" @click="centerClick(item)">
						<view class="center-icon" :style="{
							padding:'20rpx'
						}" v-if="item.icon">
							<!--  <image :src="item.icon" mode="" v-if="item.icon.indexOf('/') > -1" class="icon"></image> -->
							<uni-icons class="uniiconcss" :color="props?.fontMidIconColor || '#333333'"
								:type="item.icon" :size="item?.iconSize || 20"></uni-icons>
							<!-- <text  :class="['icon', item.icon]"></text> -->
						</view>
						<text class="text" v-if="item.text">
							{{ item.text }}
						</text>
					</view>
				</template>
			</template>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	interface PropsType {
		list : ZoTabBarItemType[]; // 导航列表
		loginPath ?: string; // 登录页路由地址
		color ?: string; // 默认颜色
		selectColor ?: string; // 选中颜色
		iconColor ?: string; // 字体图标颜色
		iconSelectColor ?: string; // 字体图标颜色
		hideIcon ?: boolean; // 不需要图标
		fontMidIconColor ?: string; // 中间字体图标颜色
	}
	interface ZoTabBarItemType {
		icon : string; // 默认图标
		selectIcon : string; // 选中图标
		text : string; // 菜单文案
		path : string; // 菜单路径
		code ?: string; // 菜单代码
		iconSize ?: string | Number; // 默认图标大小
		isCenter ?: boolean; // 是否中部菜单
		login ?: boolean; // 是否已登录
		hide ?: boolean; // 是否隐藏
		disabled ?: boolean; // 是否置灰不可点击
	}


	const props = defineProps<PropsType>();

	// emits
	interface EmitsType {
		(e : 'midClick', data : ZoTabBarItemType) : void; // 按钮点击事件
	}
	const emits = defineEmits<EmitsType>();

	// 列表配置
	const active = ref(0);

	// 是否有中间凸起按钮
	const hasMid = computed(() => {
		return props.list.findIndex((item) => item.isCenter) > -1;
	});

	const pages : any = getCurrentPages().reverse()[0];
	// 页面展示时判断当前高亮tabbar
	onLoad(() => {
		props.list.forEach((item, index) => {
			if (item.path === pages.$page.fullPath) {
				active.value = index;
			}
		});
	});

	// 中心凸起菜单点击
	const centerClick = (item : any) => {

		active.value = item
		if (item.disabled) {
			return;
		}
		if (typeof item.login !== 'undefined' && !item.login) {
			uni.redirectTo({
				url: props.loginPath || ''
			});
		} else {
			emits('midClick', item || null);
		}
	};

	// 一般菜单点击
	const itemClick = (item : any, index : any) => {

		active.value = index
		if (item.disabled) {
			return;
		}
		if (item.path === pages.$page.fullPath) {
			// 当前页面点击不跳转
			return false;
		}

		if (typeof item.login !== 'undefined' && !item.login) {
			uni.redirectTo({
				url: props.loginPath || ''
			});
		} else {
			if (item?.path) {
				uni.reLaunch({
					url: item.path
				});
			} else {
				emits('midClick', item || null);
			}

		}
	};
</script>

<style lang="scss" scoped>
	.uniiconcss {
		position: relative;
		z-index: 999;
	}

	.zo-tabbar {
		width: 100vw;
		// height: calc(130rpx + constant(safe-area-inset-bottom));
		height: calc(114rpx + env(safe-area-inset-bottom));
		z-index: 98;
		overflow: hidden;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.11);


		.content {
			padding: 0 20rpx;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			background-color: #fff;
			z-index: 998;
			align-items: flex-start;
		}

		.item {
			flex: 1;
			text-align: center;
			overflow: hidden;
			position: relative;
			z-index: 1;
			color: var(--zo-nav-default-color);

			&.disabled {
				color: #999;
			}

			&.active {
				color: var(--zo-nav-active-color);

				.icon-wrap {
					.icon.current {
						display: block;
						color: var(--zo-nav-active-icon-color);
					}

					.icon.default {
						display: none;
					}
				}
			}

			.icon-wrap {
				width: 48rpx;
				height: 48rpx;
				margin: 10rpx auto 0 auto;

				.icon {
					display: block;
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 48rpx;
					font-size: 48rpx;
					color: var(--zo-nav-default-icon-color);

					&.current {
						display: none;
					}
				}
			}

			.text {
				font-size: 24rpx;
			}
		}

		.center {
			flex: none;
			text-align: center;
			color: var(--zo-nav-default-color);

			&.active {
				color: var(--zo-nav-active-color);
			}

			.center-icon {
				// width: 100rpx;
				height: 96rpx;
				margin: -20rpx 10rpx 0 10rpx;
				position: relative;
				z-index: 0;
				// padding: 20rpx;
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.11);
				background-color: #fff;
				border-radius: 50%;
				text-align: center;
				line-height: 96rpx;

				&::before {
					content: '';
					display: block;
					width: calc(100% + 20rpx);
					height: calc(100% - 20rpx);
					position: absolute;
					background-color: #fff;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					z-index: 1;
				}

				.icon {
					display: block;
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 2;
					font-size: 96rpx;
					color: var(--zo-nav-mid-icon-color);
				}
			}

			&.center-icon-text {
				.center-icon {
					width: 65rpx;
					height: 65rpx;
					padding: 15rpx;
					margin: -30rpx 20rpx 0 20rpx;
					line-height: 65rpx;

					&::before {
						width: calc(100% + 30rpx);
						height: calc(100% - 30rpx);
					}
				}

				.icon {
					font-size: 65rpx;
				}
			}

			.text {
				position: relative;
				z-index: 3;
				top: -10rpx;
				font-size: 24rpx;
				white-space: nowrap;
				text-align: center;
			}
		}

		&.hide-icon {
			height: calc(90rpx + constant(safe-area-inset-bottom));
			height: calc(90rpx + env(safe-area-inset-bottom));
			padding-top: 0;

			.item {
				line-height: 90rpx;

				.icon-wrap {
					display: none;
				}

				.text {
					font-size: 28rpx;
				}
			}

			.center {
				.center-icon {
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;

					.icon {
						font-size: 70rpx;
					}
				}
			}
		}

		&.has-mid {
			padding-top: 35rpx;
			box-shadow: none;

			.content {
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.11);
			}
		}
	}
</style>